import * as echarts from 'echarts'
function sortBy(props: string) {
  return function (a: object, b: object) {
    return a[props] - b[props];
  }
}

// @ts-ignore
export const initDayOpts = (arr) => {
  arr.sort(sortBy("count"))
  // @ts-ignore
  let ydata = [] as any[]
  let xdata = [] as any[]
  // @ts-ignore
  arr.map(item => {
    ydata.push(item?.name)
    xdata.push(item?.count)
  })
  return {
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "80",
      right: "20",
      bottom: "20",
      top: "20",
      containLabel: false,
    },
    xAxis: {
      type: "value",
      show: false,
    },
    yAxis: {
      type: "category",
      data: ydata,
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        margin: 70,
        width: 60,
        align: "left",
        overflow: "truncate",
        formatter: function (value: any, index: any) {
          let ind = index + 1;
          if (ind == ydata.length) {
            return "{one|" + (ydata.length - index) + "} {a|" + value + "}";
          } else if (ind + 1 == ydata.length) {
            return "{two|" + (ydata.length - index) + "} {b|" + value + "}";
          } else if (ind + 2 == ydata.length) {
            return (
              "{three|" + (ydata.length - index) + "} {c|" + value + "}"
            );
          }
          if (ydata.length - index > 9) {
            return (
              "{five|" + (ydata.length - index) + "} {d|" + value + "}"
            );
          }
          return "{four|" + (ydata.length - index) + "} {d|" + value + "}";
        },
        rich: {
          a: {
            color: "#59c9f9",
          },
          b: {
            color: "#59c9f9",
          },
          c: {
            color: "#59c9f9",
          },
          d: {
            color: "#59c9f9",
          },
          // 第一名
          one: {
            backgroundColor: "#E86452",
            color: "white",
            width: 12,
            height: 16,
            padding: [1, 0, 0, 5],
            borderRadius: 10,
            fontSize: 11,
          },
          // 第二名
          two: {
            backgroundColor: "#FF9845",
            color: "white",
            width: 12,
            height: 16,
            padding: [1, 0, 0, 5],
            borderRadius: 10,
            fontSize: 11,
          },
          // 第三名
          three: {
            backgroundColor: "#F6BD16",
            color: "white",
            width: 12,
            height: 16,
            padding: [1, 0, 0, 5],
            borderRadius: 10,
            fontSize: 11,
          },
          // 一位数
          four: {
            backgroundColor: "rgba(0,0,0,0.15)",
            color: "white",
            width: 12,
            height: 16,
            padding: [1, 0, 0, 5],
            borderRadius: 10,
            fontSize: 11,
          },
          // 两位数
          five: {
            backgroundColor: "rgba(0,0,0,0.15)",
            color: "white",
            width: 16,
            height: 16,
            padding: [1, 0, 0, 1],
            borderRadius: 10,
            fontSize: 11,
          },
        },
      },
    },
    series: [{
      type: "bar",
      showBackground: true,
      label: {
        show: true,
        position: "right",
        color: "rgba(0,0,0,0.45)",
      },
      barWidth: 20,
      itemStyle: {
        color: "#5B8FF9",
      },
      data: xdata,
    },]
  }
}


export const echart2 = {
  color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
  title: {
    text: '',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['Line 1', 'Line 2', 'Line 3', 'Line 4', 'Line 5'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'Line 1',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      emphasis: {
        focus: 'series',
      },
      data: [140, 232, 101, 264, 90, 340, 250],
    },
    {
      name: 'Line 2',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      emphasis: {
        focus: 'series',
      },
      data: [120, 282, 111, 234, 220, 340, 310],
    },
    {
      name: 'Line 3',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      emphasis: {
        focus: 'series',
      },
      data: [320, 132, 201, 334, 190, 130, 220],
    },
    {
      name: 'Line 4',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 0, 135)',
          },
          {
            offset: 1,
            color: 'rgb(135, 0, 157)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [220, 402, 231, 134, 190, 230, 120],
    },
    {
      name: 'Line 5',
      type: 'line',
      stack: 'Total',
      smooth: true,
      lineStyle: {
        width: 0,
      },
      showSymbol: false,
      label: {
        show: true,
        position: 'top',
      },
      areaStyle: {
        opacity: 0.8,
        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
          {
            offset: 0,
            color: 'rgb(255, 191, 0)',
          },
          {
            offset: 1,
            color: 'rgb(224, 62, 76)',
          },
        ]),
      },
      emphasis: {
        focus: 'series',
      },
      data: [220, 302, 181, 234, 210, 290, 150],
    },
  ],
}
